<template>
  <div class="topBar">
    <div class="first">
      <el-row class="topBar-border">
        <el-col :span="16" :offset="4">
          <div class="top">
            <div>
              <i class="el-icon-service"> 欢迎来到小店，祝您天天有个好心情 (๑*◡*๑)</i>
            </div>
            <div class="top-left">
              <i class="el-icon-phone"> 012-34567890</i>
              <i class="el-icon-user-solid">
                <el-dropdown @command="selectItem">
              <span class="el-dropdown-link">
                会员中心<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                  <el-dropdown-menu slot="dropdown" v-if="!getLoginFlag">
                    <el-dropdown-item command="/register/register">会员注册</el-dropdown-item>
                    <el-dropdown-item command="/login/login">会员登录</el-dropdown-item>
                  </el-dropdown-menu>
                  <el-dropdown-menu slot="dropdown" v-else>
                    <el-dropdown-item command="/onceInfo/onceInfo">会员中心</el-dropdown-item>
                    <el-dropdown-item command="logout">注销登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </i>
              <nuxt-link :to="{path:'/collection/collection'}"><i class="el-icon-star-on" >收藏（{{getCollectCount}}）</i></nuxt-link>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16" :offset="4">
          <div class="menu">
            <div class="left">
              <div class="menu-left">
                <img
                  src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg"
                  alt="">
              </div>
              <div class="menu-left">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="selectMenuItem">
                  <el-menu-item index="/">首页</el-menu-item>
                  <el-submenu index="2">
                    <template slot="title">全部分类</template>
                    <el-menu-item class="second-item" :index="item.type" v-for="(item,index) in menuList" :key="index">
                      {{item.type}}
                    </el-menu-item>
                  </el-submenu>
                  <!--<el-menu-item index="品牌">品牌专区</el-menu-item>
                  <el-menu-item index="联系我们">联系我们</el-menu-item>-->
                </el-menu>
              </div>
            </div>
            <div class="right">
              <!--<el-button type="text" class="btn-search" icon="el-icon-search"></el-button>-->
              <el-badge :value="getCartCount" class="item btn-cart">
                <nuxt-link to="/cart/cart">
                  <el-button type="text" class="btn-search" icon="el-icon-goods"></el-button>
                </nuxt-link>
              </el-badge>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--    <div class="second" v-if="activeIndex!=='/register/register' && activeIndex!=='/login/login'">-->
    <!--      <el-row>-->
    <!--        <el-col :span="16" :offset="4">-->
    <!--          <el-breadcrumb separator="/">-->
    <!--            <el-breadcrumb-item :to="{ path: '/' }" v-if="activeIndex!=='/'"> <i class="el-icon-s-home"></i>-->
    <!--            </el-breadcrumb-item>-->
    <!--            <el-breadcrumb-item :to="{ path: routerActive[0]}"-->
    <!--                                v-if="activeIndex!=='/'">-->
    <!--              {{routerActive[1]}}-->
    <!--            </el-breadcrumb-item>-->
    <!--            &lt;!&ndash;            <el-breadcrumb-item :to="{ path: item }" v-for="(item,index) in routerList" :key="index"&ndash;&gt;-->
    <!--            &lt;!&ndash;                                v-if="item!=2 && activeIndex!=='/'"&ndash;&gt;-->
    <!--            &lt;!&ndash;                                :class="[index===routerList.length-1?'active':'']">{{item}}&ndash;&gt;-->
    <!--            &lt;!&ndash;            </el-breadcrumb-item>&ndash;&gt;-->
    <!--          </el-breadcrumb>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--    </div>-->
  </div>
</template>

<script>

  import Cookie from "js-cookie";
  import Vue from 'vue';
  export default {
    data() {
      return {
        collectCount: 0,
        cartCount: 0,
        activeIndex: '/',
        routerActive: '',
        loginFlag: false,
        menuList: [],
      }
    },
    computed: {
      getRouterActive() {
        return this.$store.state.routerActive
      },
      getLoginFlag() {
        return  this.$store.state.loginFlag
      },
      getCartCount() {
        return this.$store.state.cartCount
      },
      getCollectCount() {
        return this.$store.state.collectionCount
      }
    },
    watch: {
     /* getRouterActive(val) {
        this.routerActive = val
      },
      getLoginFlag(val) {
        this.loginFlag = val
      },
      getCartCount(val) {
        this.cartCount = val
      },
      getCollectCount(val,oldVal) {
        console.log(val,oldVal)
        this.collectCount = val
      }*/
    },
    methods: {
      selectMenuItem(key, keyPath) {
        console.log(key, keyPath);
        this.activeIndex = key
        if (keyPath[0] === '2') {
          this.routerActive = ['/category/category?name=' + key, key]
          this.$router.push({
            path: '/category/category',
            query: {name: key}
          })
        } else {
          switch (key) {
            case '品牌':
              key = '/brand/brand';
              this.routerActive = ['/brand/brand', '品牌']
              break;
            case '联系我们':
              key = '';
              this.routerActive = ['/brand/brand', '联系我们']
              break;
          }
          this.$store.state.routerActive = this.routerActive
          this.$router.push(key)
        }

      },
      selectItem(key) {
        console.log(key)
        if (key==='logout'){
          Cookie.remove("practiceJwtToken");
          this.activeIndex = '/login/login'
          this.$router.push('/login/login')
        }else {
          this.$router.push(key)
          this.activeIndex = key
        }
      }
    },
    mounted() {
      this.$axios.get('/menus')
        .then((res) => {
          this.$store.state.menu = res.data;
          this.menuList = res.data
        })
    },
  };
</script>

<style lang="less">
  .topBar {
    a{
      text-decoration: none;
      color: #606266;
    }
    .second {
      margin-bottom: 15px;

      /*.active {*/
      /*  .is-link {*/
      /*    color: #EB3E32 !important;*/
      /*  }*/
      /*}*/
    }

    .first {
      box-shadow: 0px 4px 10px -5px #e4e4e4;
      border-bottom: 1px solid #ddd;
      margin-bottom: 15px;
      background-color: #fff;


      .topBar-border {
        border-bottom: 1px solid #eee;
      }

      .top {
        padding: 5px;
        color: #999;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        font-size: 13px;
        display: flex;
        justify-content: space-between;

        .top-left {
          i:hover {
            color: red;
          }
        }
      }

      .menu {
        padding: 20px 0;
        display: flex;
        justify-content: space-between;

        img {
          height: 40px;
          width: 80px;
        }

        .left {
          display: flex;
          align-items: center;

          .menu-left {
            display: inline-block;
            margin-right: 40px;

            .el-menu.el-menu--horizontal {
              border-bottom: none;
            }

            .el-submenu__title:hover {
              color: #EB3E32 !important;
            }


            .el-menu-item:hover {
              color: #EB3E32 !important;
            }

            .el-submenu__title {
              border: none;
              color: #909399;
            }

            .el-menu-item.is-active {
              border: none;
              color: #909399;

            }

            .second-item:hover {
              color: #EB3E32 !important;
            }

          }
        }

        .right {
          display: flex;
          align-items: center;

          .btn-cart {
            margin-left: 20px;
          }

          .btn-search {
            font-size: 2em;
            color: #7F828B;
          }
        }
      }
    }
  }

  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    color: #EB3E32 !important;
  }

  .el-menu--horizontal .el-menu .el-menu-item.is-active, .el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
    color: #909399;
  }
</style>
